<template>
	<view class="myOrder">
		<view class="tabs" v-if="orderList && isLoading">
			<view class="tab" v-for="(item, index) in tabsName" :key="item.name"
				:class="{'click-sty': current == index, 'underline': current == index}" @click="change(item, index)">
				{{ item.name }}
			</view>
		</view>

		<view class="order-list" v-if="orderList">
			<Order v-for="item in orderList" :key="item.orderNum" :order="item" v-if="item"></Order>
		</view>

		<view class="not-order" v-if="!orderList && !isLoading">
			<image src="../../static/icon/image_49.png" class="not-img" mode=""></image>
			<view class="not-desc">{{$t("myOrder.hint")}}</view>
		</view>
	</view>
</template>

<script>
	import Order from "../../components/Order/Order.vue"
	import { getOrder } from "@/common/api.js"

	export default {
		data() {
			return {
				isLoading: true,
				tabsName: [{
					id: 1,
					name: this.$t("saleOrder.all")
				}, {
					id: 2,
					name: this.$t("saleOrder.paid")
				}, {
					id: 6,
					name: this.$t("saleOrder.ship")
				}, {
					id: 3,
					name: this.$t("saleOrder.auth")
				}, {
					id: 4,
					name: this.$t("saleOrder.confirm")
				}, {
					id: 5,
					name: this.$t("saleOrder.retu")
				}],
				oldOrderList: [],
				orderList: null,
				current: 0,
				status: ""
			}
		},
		methods: {
			change(item, index) {
				this.current = index;
				this.orderList = this.oldOrderList;
				this.status = item.id;
				const name = item.name;
				if (this.status == 3) {
					this.status = this.$t("myOrder.shipped")
				}
				this.orderList = this.orderList.map((item) => {
					if (item.orderState == name || name == this.$t("myOrder.all")) {
						return item;
					}
				});
			},
			initData() {
				// 替换数字状态为字符串状态
				this.orderList = this.orderList.map(item => {
					if(item.orderState == 0) {
						item.orderState = this.$t("myOrder.paid")
					}
					if(item.orderState == 1) {
						item.orderState = this.$t("myOrder.ship")
					}
					if(item.orderState == 2) {
						item.orderState = this.$t("myOrder.received")
					}
					if(item.orderState == 3) {
						item.orderState = this.$t("myOrder.received")
					}
					if(item.orderState == 4) {
						item.orderState = this.$t("myOrder.confirm")
					}
					if(item.orderState == 5) {
						item.orderState = this.$t("myOrder.cancel")
					}
					
					return item;
				});
				this.oldOrderList = this.orderList;
			},
			async initOrderList() {
				const res = await getOrder();
				if(res.data && res.data.length > 0) {
					this.orderList = res.data;
					this.initData();
				} else {
					this.isLoading = false;
				}
				console.log(res);
			}
		},
		components: {
			Order
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("saleOrder.title")});
		},
		onLoad() {
			this.initOrderList();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #FBFBFB;
	}

	.myOrder {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.tabs {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		height: 102rpx;
		padding: 0 20rpx;
		background-color: #fff;
		position: fixed;
		/* #ifdef APP */
		top: 0;
		/* #endif */
		
		/* #ifdef H5 */
		top: 86rpx;
		/* #endif */
		left: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 2;
		overflow-x: scroll;
	}

	.tab {
		height: 100%;
		color: #858585;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		line-height: 100rpx;
		letter-spacing: 0rpx;
		text-align: center;
		box-sizing: border-box;
		padding: 0 10rpx;
		width: 300rpx;
	}

	.click-sty {
		color: #000000;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		line-height: 100rpx;
		letter-spacing: 0rpx;
		text-align: center;
	}

	.underline {
		border-bottom: 6rpx solid #000000;
	}

	.order-list {
		width: 100%;
		height: 100%;
		background-color: #FBFBFB;
		box-sizing: border-box;
		padding: 0 24rpx;
		padding-top: 102rpx;
	}

	.not-order {
		position: absolute;
		left: 50%;
		top: 300rpx;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.not-img {
			width: 186rpx;
			height: 204rpx;
		}

		.not-desc {
			color: #858585;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			text-align: center;
			margin-top: 104rpx;
		}
	}
</style>
